/**
* @Author: 李晨光
* @Date: 2019/12/16
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/16
**/
<comment>
  # 行为观察
</comment>
<template>
  <div id="ObservationsLedger" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        {{type == 'submittedLedger'?'行为观察台账':'行为观察'}}
        <mu-button icon slot="right" @click="searchcontroll = true">
        <!-- <mu-icon value="more"></mu-icon> -->
          <i class="iconfont iconshaixuan4"></i>
        </mu-button>
      </mu-appbar>
    </div>
    <mu-container style="height:calc(100vh - .45rem);position: relative;background:#fff;overflow: scroll;padding: 10px 14px;" ref="container" >
      <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load" :loaded-all="loadAll">
        <!-- 这里是业务结构 -->
        <mu-paper class="lan-card" :z-depth="1" v-for="(item,index) in listData" :key="index" @click="gotoDetail(item)">
          <div class="lan-detail">
            <mu-badge class="tag" :content="item.status == 2 ? '通过' : item.status == 1 ? '不通过' : '待审批'" :color="item.status == 2 ? 'success' : item.status == 1 ? 'secondary' : ''"></mu-badge>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">观察时间：</span>
            <span class="lan-detail-r">{{item.observeTime}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">被观察人：</span>
            <span class="lan-detail-r">{{item.beObservedUserName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">观察人：</span>
            <span class="lan-detail-r">{{item.observeUserName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">审核人：</span>
            <span class="lan-detail-r">{{item.approvalUserName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">工匠行为：</span>
            <span class="lan-detail-r">{{item.behaviorName}}</span>
          </div>
          <div class="lan-detail">
            <span class="lan-detail-h">奖励积分：</span>
            <span class="lan-detail-r">{{item.score}}</span>
          </div>
        </mu-paper>
        <p v-if="loadAll && listData.length > 5" class="nodataTips">无更多数据了</p>
      </mu-load-more>
      <NoData v-if="listData.length <= 0 && loaded"/>
    </mu-container>
    <!-- 筛选 -->
    <mu-dialog
      width="100%"
      transition="slide-right"
      fullscreen
      :open.sync="searchcontroll"
      class="lan-dialog"
    >
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="searchcontroll = false">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>筛选条件
        <mu-button icon slot="right" @click="clearSearch">
          <span class="text">清空</span>
        </mu-button>
      </mu-appbar>
      <!-- <mu-bottom-sheet :open.sync="searchcontroll"> -->
      <mu-list class="lan-dialog-body no-padding bg-default">
        <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="32%">
          <mu-form-item label="开始时间">
            <mu-date-input
              v-model="form.startTime"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              container="bottomSheet"
              label-float
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="结束时间">
            <mu-date-input
              v-model="form.endTime"
              placeholder="请选择"
              container="bottomSheet"
              label-float
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="项目名称">
            <mu-select
              v-model="form.orgId"
              placeholder="请选择"
              popover-class="lan-popover-select"
            >
              <mu-option
                v-for="(list,index) in projectList"
                :key="index"
                :label="list.projectName"
                :value="list.projectId"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="被观察人姓名" class="form-between" >
            <mu-text-field v-model="form.userName" placeholder="请输入"></mu-text-field>
              <i class="iconfont angle-left iconangle-right "></i>
          </mu-form-item>
          <mu-form-item label="审核状态">
            <mu-select v-model="form.approvalType" placeholder="请选择" popover-class="lan-popover-select">
              <mu-option
                v-for="(list,index) in typeList"
                :key="index"
                :label="list.name"
                :value="list.id"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
        </mu-form>
        <mu-list-item class="lan-dialog-sumit lan-block-btn-line">
          <mu-button full-width color="primary" class="lan-block-btn" @click="search">确认</mu-button>
        </mu-list-item>
      </mu-list>
    </mu-dialog>
  </div>
</template>

<script>

  export default {
    name: 'ObservationsLedger',
    components: {
    },
    props: {},
    data() {
      return {
        api: {
          getSubmittedListApi: '/safety/starObserve/pageList',
          approveAPi: '/safety/star/approval/submit'
        },
        type: '',
        tabList: [{id: "1", name: "待审批"}, {id: "2", name: "已审批"}],
        refreshing: false,
        loading: false,
        loaded: false,
        loadAll: false,
        pageSize: 10,
        pageNo: 0,
        totalPage: 1,
        listData: [],
        params: {
          orgId: '',
          type: '',
          approvalUserId: '',
          status: '',
          approvalType: '',
        },
        searchcontroll:false,
        form:{
          startTime:'',
          endTime:'',
          approvalType:'',
          orgId:'',
          userName:''
        },
        typeList:[{id: "0", name: "待审批"}, {id: "1", name: "不通过"},{id: "2", name: "通过"}],
        projectList:[]
      }
    },
    computed: {},
    async created() {
      this.projectList = await this.$A.comData("projectList");
      this.type = this.$route.query.type
      let orgInfo = this.$A.GS("orgInfo");
      let userInfo = this.$A.GS("userInfo");
      this.params.type = orgInfo.type
      this.params.orgId = orgInfo.orgId
      this.params.approvalUserId = userInfo.userId
      this.getData(this.params)
    },
    mounted() {
    },
    watch: {},
    methods: {
      clearSearch(){
       this.form = {
          startTime:'',
          endTime:'',
          approvalType:'',
          orgId:'',
          userName:''
        }
      },
    search() {
      this.loaded = false;
      this.loadAll = false;
      this.pageSize = 10;
      this.pageNo = 0;
      this.totalPage = 1;
      this.data = [];
      this.searchcontroll = false;
      this.getData(this.form);
    },
      async getData(params) {
        if (this.pageNo >= this.totalPage) {
          this.loadAll = true;
          return;
        }
        if (!this.loadAll) {
          this.pageNo += 1;
        } else {
          return
        }
        let obj = {
          ...params,
          "current": this.pageNo,
          "size": this.pageSize,
        };
        this.$openLoading()
        this.$A.Go('get', this.api.getSubmittedListApi, obj)
          .then(success => {
            this.$closeLoading()
            if (success.code == 200) {
              let data = success.body.rows
              let total = success.body.page.rows || '0'
              this.totalPage = Math.ceil(total / this.pageSize)
              if (this.pageNo == 1) {
                this.listData = data;
              } else {
                this.listData.push(...data);
              }
              if (total == 0 || Math.ceil(total / this.pageSize) <= this.pageNo || data.length <= 0) {
                this.loadAll = true;
              }
            } else {
              this.listData = [];
            }
            this.loaded = true;
          }).catch((err) => {
          this.$closeLoading()
          console.warn(err)
        })
      },
      async load() {
        this.loading = true;
        await this.getData(this.params)
        this.loading = false;
      },
      async refresh() {
        this.refreshing = true;
        this.pageNo = 0;
        this.totalPage = 1;
        this.loaded = false
        this.loadAll = false
        this.listData = []
        this.$refs.container.scrollTop = 0;
        await this.getData(this.params)
        this.refreshing = false;
      },
      gotoDetail(detail) {
        this.$router.push({
          name: 'ObservationLedgerDetail',
          query: {
            id: detail.id,
            type: this.type
          }
        })
      }
    },
    destroyed() {
    }
  }
</script>

<style lang="scss">
</style>
